<template>
	<div class="pingtaidaren">
		<div class="pingtaida" v-if="$store.state.denglu">
			<div class="ciyunpinpai">
				<div class="ciyunpinpai1">
					<span>平台达人分布</span>
				</div>
				<div class="ciyunpinpai2">
					查看功能介绍
				</div>
			</div>
			
			<div class="darentubiao">
				<div class="darentubiao1">
					<div class="darentubiao1_1">
						<span>粉丝数分布</span>
					</div>
					
					<div id="c1"></div>
					
				</div>
				<div class="darentubiao2">
					<div class="darentubiao2_1">
						<span>粉丝质量分布</span>
					</div>
					
					<div id="c2"></div>
				</div>
			</div>
			
			<div class="darentubiaotu">
				<div class="darentubiaotu1">
					<div class="darentubiaotu1_1">
						<span>用户活跃时间分布</span>
					</div>
					
					<div id="c3"></div>
					
				</div>
				<div class="darentubiaotu2">
					<div class="darentubiaotu2_1">
						<span>集均点赞分布</span>
					</div>
					
					<div id="c4"></div>
				</div>
			</div>
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
	</div>
</template>

<script>
	import { Chart } from '@antv/g2';
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"pingtaidaren",
		components:{
			jinzhi
		},
		data(){
			return{
				data:[
					{ type: '10-20万',sales:25 },
					{ type: '20-40万 ',sales:54 },
					{ type: '40-60万',sales:32 },
					{ type: '60-80万',sales:86 },
					{ type: '80-100万',sales:56 },
					{ type: '100-200万',sales:76 },
					{ type: '200-400万',sales:23 },
					{ type: '400-600万',sales:39 },
					{ type: '600以上',sales:98 },
				],
				data1:[
					{ type: '20分以下',sales:98 },
					{ type: '20-30分 ',sales:13 },
					{ type: '30-40分',sales:67 },
					{ type: '40-50分',sales:76 },
					{ type: '50-60分',sales:45 },
					{ type: '60-70分',sales:34 },
					{ type: '70-80分',sales:87 },
					{ type: '80-90分',sales:45 },
					{ type: '90以上',sales:32 },
				],
				data2:[
					{ type: '上半夜',sales:34 },
					{ type: '6—8点',sales:23 },
					{ type: '8-10点',sales:4 },
					{ type: '10-12点',sales:45 },
					{ type: '12-14点',sales:23 },
					{ type: '14-16点',sales:76 },
					{ type: '16-18点',sales:7 },
					{ type: '18-20点',sales:34 },
					{ type: '20-22点',sales:23 },
					{ type: '下半夜',sales:63 },
				],
				data3:[
					{ type: '1w以下',sales:20 },
					{ type: '1-10w',sales:45 },
					{ type: '10-100w',sales:32 },
					{ type: '100-400w',sales:88 },
					{ type: '400-800w',sales:65 },
					{ type: '800-1200w',sales:98 },
					{ type: '1200-2000w',sales:44 },
					{ type: '2000-4000w',sales:76 },
					{ type: '4000-8000w',sales:24 },
					{ type: '8000-99999w',sales:89 },
					{ type: '1亿以上',sales:23 },
				],
				
				tuZonggao:'',
				wenben:'平台达人分布用数据深度分析达人之间的粉丝重合情况，帮助用户制定最佳达人投放组合。'
			}
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			this.tuZonggao=document.body.offsetWidth*0.3;
			
			$(window).resize(()=>{
				this.tuZonggao=document.body.offsetWidth*0.2;
			})
			
			if(this.$store.state.denglu!=false){
				setTimeout(()=>{
					this.tubiao1()
					this.tubiao2()
					this.tubiao3()
					this.tubiao4()
				},500)
			}
		},
		methods:{
			tubiao1(){
				var _self=this;
				// Step 1: 创建 Chart 对象
				const chart = new Chart({
					container: 'c1', // 指定图表容器 ID
					autoFit: true,
					height: this.tuZonggao,
				});
				chart.data(_self.data);
				
				chart.coordinate('rect').scale(0.7,1.2); //改变图的坐标系类型
				
				chart.scale('sales', {
				  ticks: [0, 20, 40, 60, 80,100],
				  formatter: (val) => `${val}%`,
				  alias:"粉丝数百分比(%)" //Y轴左边的的文字
				});
				chart.axis('sales', {
				  title: {},
				});
				
				chart.tooltip({
				  showMarkers: false,
				});//是否显示辅助线
				chart.interval().position('type*sales');//创建图形语法，绘制柱状图,创建的x轴和Y轴的东西
				chart.interaction('element-active');
				
				chart.render();//渲染图表,跟新图表
			},
			tubiao2(){
				var _self=this;
				// Step 1: 创建 Chart 对象
				const chart = new Chart({
					container: 'c2', // 指定图表容器 ID
					autoFit: true,
					height: this.tuZonggao,
				});
				chart.data(_self.data1);
				
				chart.coordinate('rect').scale(0.7,1.2); //改变图的坐标系类型
				
				chart.scale('sales', {
				  ticks: [0, 20, 40, 60, 80,100],
				  formatter: (val) => `${val}%`,
				  alias:"粉丝数质量(%)" //Y轴左边的的文字
				});
				chart.axis('sales', {
				  title: {},
				});
				
				chart.tooltip({
				  showMarkers: false,
				});//是否显示辅助线
				chart.interval().position('type*sales');//创建图形语法，绘制柱状图,创建的x轴和Y轴的东西
				chart.interaction('element-active');
				
				chart.render();//渲染图表,跟新图表
			},
			
			tubiao3(){
				var _self=this;
				// Step 1: 创建 Chart 对象
				const chart = new Chart({
					container: 'c3', // 指定图表容器 ID
					autoFit: true,
					height: this.tuZonggao,
				});
				chart.data(_self.data2);
				
				chart.coordinate('rect').scale(0.7,1.2); //改变图的坐标系类型
				
				chart.scale('sales', {
				  ticks: [0, 20, 40, 60, 80,100],
				  formatter: (val) => `${val}%`,
				  alias:"用户活跃时间分布(%)" //Y轴左边的的文字
				});
				chart.axis('sales', {
				  title: {},
				});
				
				chart.tooltip({
				  showMarkers: false,
				});//是否显示辅助线
				chart.line().position('type*sales');//创建图形语法，绘制柱状图,创建的x轴和Y轴的东西
				chart.interaction('element-active');
				
				chart.render();//渲染图表,跟新图表
			},
			tubiao4(){
				var _self=this;
				// Step 1: 创建 Chart 对象
				const chart = new Chart({
					container: 'c4', // 指定图表容器 ID
					autoFit: true,
					height: this.tuZonggao,
				});
				chart.data(_self.data3);
				
				chart.coordinate('rect').scale(0.7,1.2); //改变图的坐标系类型
				
				chart.scale('sales', {
				  ticks: [0, 20, 40, 60, 80,100],
				  formatter: (val) => `${val}%`,
				  alias:"集均点赞分布(%)" //Y轴左边的的文字
				});
				chart.axis('sales', {
				  title: {},
				});
				
				chart.tooltip({
				  showMarkers: false,
				});//是否显示辅助线
				chart.line().position('type*sales');//创建图形语法，绘制柱状图,创建的x轴和Y轴的东西
				chart.interaction('element-active');
				
				chart.render();//渲染图表,跟新图表
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.pingtaidaren{
		
		.pingtaida{
			
			.ciyunpinpai{
				margin-bottom:0.4rem ;
				
				.ciyunpinpai1{
					float: left;
					height: 100%;
					box-sizing: border-box;
					position: relative;
					
					span{
						font-size: 0.7rem;
						display: block;
						margin-left:0.8rem ;
						color: #333333;
						letter-spacing: 0.05rem;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #0091FF;
					}
				}
				.ciyunpinpai2{
					margin-left:0.4rem ;
					margin-top:0.3rem ;
					float: left;
					cursor: pointer;
					color: #0091FF;
					font-size: 0.35rem;
				}
			}
			.ciyunpinpai::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.darentubiao{
				margin-top:1rem ;
				background-color: #fff;
				border-radius:0.1rem ;
				padding: 0.4rem 0.6rem;
				
				.darentubiao1{
					float: left;
					width: 48%;
					
					.darentubiao1_1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: block;
							margin-left:0.7rem ;
							padding-top:0.4rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							left: 0;
							top:0.2rem;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					#c1{
						margin-top:1rem ;
					}
				}
				.darentubiao2{
					float: right;
					width: 48%;
					
					.darentubiao2_1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: block;
							margin-left:0.7rem ;
							padding-top:0.4rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							left: 0;
							top:0.2rem;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					#c2{
						margin-top:1rem ;
					}
				}
			}
			.darentubiao::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.darentubiaotu{
				margin-top:1rem ;
				background-color: #fff;
				border-radius:0.1rem ;
				padding: 0.4rem 0.6rem;
				
				.darentubiaotu1{
					float: left;
					width: 48%;
					
					.darentubiaotu1_1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: block;
							margin-left:0.7rem ;
							padding-top:0.4rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							left: 0;
							top:0.2rem;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					#c3{
						margin-top:1rem ;
					}
				}
				.darentubiaotu2{
					float: right;
					width: 48%;
					
					.darentubiaotu2_1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: block;
							margin-left:0.7rem ;
							padding-top:0.4rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							left: 0;
							top:0.2rem;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					#c4{
						margin-top:1rem ;
					}
				}
			}
			.darentubiaotu::after{
				content: "";
				display: block;
				clear: both;
			}
		}
	}
</style>

<style  lang="scss">
	.el-submenu .el-menu-item {
	    height: 50px;
	    line-height: 50px;
	    padding: 0 0;
	    min-width: 0.1rem;
	}
</style>
